<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="退款ID" width="95">
      <template slot-scope="scope">
        {{ scope.row.refundId }}
      </template>
    </el-table-column>
      <el-table-column align="center" label="退款人与电话" width="95">
        <template slot-scope="scope">
          {{ scope.row.ordersList[0].addressLists[0].usersLists[0].userName }}<br/>
          {{ scope.row.ordersList[0].addressLists[0].usersLists[0].userPhone }}
        </template>
      </el-table-column>
      <el-table-column label="商品"  align="center">
        <template slot-scope="scope">
<!--            {{ scope.row.ordersList[0].cartLists[0].goodsCharacterList[0].goodsList[0].categoryList[0].categoryName }} _-->
<!--          {{ scope.row.ordersList[0].cartLists[0].goodsCharacterList[0].goodsList[0].typesList[0].typeName }} _-->
          {{ scope.row.ordersList[0].cartLists[0].goodsCharacterList[0].goodsList[0].goodsName }}<br/>
          {{ scope.row.ordersList[0].cartLists[0].goodsCharacterList[0].characterName}}
        </template>
      </el-table-column>
      <el-table-column label="商品图片" width="140px">
        <template slot-scope="scope">
          <img :src="scope.row.ordersList[0].cartLists[0].goodsCharacterList[0].goodsList[0].goodsImg" width="120px">
        </template>
      </el-table-column>
      <el-table-column label="收件人和电话"  align="center">
        <template slot-scope="scope">
          {{ scope.row.ordersList[0].addressLists[0].addrNicname }}<br/>
          {{ scope.row.ordersList[0].addressLists[0].addrPhone }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址"  align="center">
        <template slot-scope="scope">
          {{ scope.row.ordersList[0].addressLists[0].addrDetail }}
        </template>
      </el-table-column>
      <el-table-column label="件数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.ordersList[0].cartLists[0].cartNum}}
        </template>
      </el-table-column>

      <el-table-column label="总价"  align="center">
        <template slot-scope="scope">
          {{ scope.row.ordersList[0].cartLists[0].cartPrice}}
        </template>
      </el-table-column>
      <el-table-column label="退款理由">
        <template slot-scope="scope">
          {{ scope.row.refundReason }}
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  // import { getList } from '@/api/table'
  import { listApi } from '@/api/server-refund'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      var that = this
      that.listLoading = true
      listApi(function(msg) {
        console.log(msg);
        that.list = msg.data;
        if (msg.msg === '查询情况') {
          that.listLoading = false
        }
      })
    }
  }
}
</script>
